<template>
  <div class="target-ip-info">
    <el-row>
      <div class="row-division-18"></div>
      <el-col :span="12" class="col">
        <div class="common-block-wrap" style="height: 370px">
          <title-card title="IP产生日志量" v-loading="loading">
            <base-chart
              slot="content"
              :option="columnOption1"
              v-if="columnOption1.dataset.source.length"
            ></base-chart>
            <div class="chart-tooltip">
              <!-- <i class="iconfont icon-wushuju"></i> -->
              <commonIcon
                iconName="icon-wushuju"
                iconType="icon"
                :iconSize="36"
              ></commonIcon>
              <span class="tip-content">暂无数据</span>
            </div>
          </title-card>
        </div>
        <div class="row-division-18"></div>
      </el-col>

      <el-col :span="12" class="col col-2">
        <div class="common-block-wrap" style="height: 370px">
          <title-card title="IP触发告警量" v-loading="loading2">
            <base-chart
              slot="content"
              :option="columnOption2"
              v-if="columnOption2.dataset.source.length"
            ></base-chart>
            <div class="chart-tooltip" v-else>
              <!-- <i class="iconfont icon-wushuju"></i> -->
              <commonIcon
                iconName="icon-wushuju"
                iconType="icon"
                :iconSize="36"
              ></commonIcon>
              <span class="tip-content">暂无数据</span>
            </div>
          </title-card>
        </div>
        <div class="row-division-18"></div>
      </el-col>
      <el-col :span="12" class="col">
        <div class="common-block-wrap" style="height: 370px">
          <title-card title="此IP事件类型" v-loading="loading3">
            <base-chart
              slot="content"
              :option="columnOption3"
              v-if="columnOption3.dataset.source.length"
            ></base-chart>
            <div class="chart-tooltip" v-else>
              <!-- <i class="iconfont icon-wushuju"></i> -->
              <commonIcon
                iconName="icon-wushuju"
                iconType="icon"
                :iconSize="36"
              ></commonIcon>
              <span class="tip-content">暂无数据</span>
            </div>
          </title-card>
        </div>
        <div class="row-division-18"></div>
      </el-col>
      <el-col :span="12" class="col col-2">
        <div class="common-block-wrap" style="height: 370px">
          <title-card title="告警规则占比Top10" v-loading="loading4">
            <base-chart
              slot="content"
              :option="columnOption4"
              v-if="columnOption4.dataset.source.length"
            ></base-chart>
            <div class="chart-tooltip" v-else>
              <!-- <i class="iconfont icon-wushuju"></i> -->
              <commonIcon
                iconName="icon-wushuju"
                iconType="icon"
                :iconSize="36"
              ></commonIcon>
              <span class="tip-content">暂无数据</span>
            </div>
          </title-card>
        </div>
        <div class="row-division-18"></div>
      </el-col>
      <el-col :span="24" class="col col-1">
        <div class="common-block-wrap">
          <title-card title="资产告警">
            <div slot="content" class="chart-inside-wrap">
              <common-table :stripe="true" :data="option" v-loading="loading5">
                <!-- <el-table-column
                  prop="alarmBusiness"
                  label="告警子类型"
                  width="180"
                  show-overflow-tooltip
                ></el-table-column> -->
                <el-table-column
                  prop="alarmContent"
                  label="攻击目标"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  prop="alarmTime"
                  label="告警时间"
                  width="180"
                  show-overflow-tooltip
                >
                  <template slot-scope="{ row }"
                    >{{ parseTime(new Date(row.alarmTime)) }}
                  </template>
                </el-table-column>

                <!-- <el-table-column
                  prop="logNum"
                  label="告警对应日志数量"
                  width="160"
                  show-overflow-tooltip
                ></el-table-column> -->

                <el-table-column
                  prop="status"
                  label="状态"
                  align="center"
                  width="80"
                >
                  <template slot-scope="{ row }">
                    <el-tag type="warning" size="mini" v-if="row.status === 0"
                      >待处理
                    </el-tag>
                    <el-tag size="mini" v-if="row.status === 1">处理中</el-tag>
                    <el-tag type="danger" size="mini" v-if="row.status === 3"
                      >已关闭
                    </el-tag>
                  </template>
                </el-table-column>
              </common-table>
              <pagination
                slot="pagination"
                v-show="total > 0"
                :total="total"
                :page.sync="query.pageNum"
                :limit.sync="query.pageSize"
                @pagination="getAlarmInfoList()"
              />
            </div>
          </title-card>
        </div>
        <div class="row-division-18"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TitleChart from "@/components/EChart/TitleChart";
import BaseChart from "@/components/EChart/components/BaseChart";
import {
  alarmLogDataTrend,
  alarmNumDataByTargetIpTrend,
  alarmInfoCountGroupByType,
  alarmInfoCountGroupByRuleName,
  alarmInfoList,
} from "@/api/alarmCenter/index";
import commonIcon from "@/components/CommonIcon";

export default {
  name: "alarm",
  components: { TitleChart, BaseChart, commonIcon },
  props: {
    params: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      categoryThirdCodeName: null,
      form: {
        categoryThirdName: null,
        managerIp: null,
        orgCode: null,
        userCode: null,
        businessCode: null,
        networkArea: null,
        categoryFirstCode: null,
        factory: null,
        assetName: null,
        assetCode: null,
      },
      total: 0,
      loading: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false,
      option: [],
      query: {
        pageNum: 1,
        pageSize: 10,
      },
      columnOption1: {
        tooltip: {
          show: true,
        },
        legend: {
          show: true,
          orient: "horizontal",
          itemWidth: 22,
          itemHeight: 10,
          lineStyle: {
            type: "solid",
          },
        },
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，
          // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
          // 如果不指定 dimensions，也可以通过指定 series.encode

          source: [],
        },
        grid: {
          right: 10,
          bottom: 50,
          top: 40,
        },
        xAxis: {
          show: true,
          type: "category",
          axisLine: {
            show: true,
          }, // 坐标轴线
          axisTick: {
            show: false,
          }, // 坐标轴刻度
          axisLabel: {
            rotate: -15,
            align: "center",
            margin: 20,
            show: true,
            interval: 0,
            width: 68,
            overflow: "breakAll",
            ellipsis: "...",
          }, // 坐标轴标签
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
          axisTick: {
            show: false,
          }, // 坐标轴刻度
          axisLabel: {
            show: true,
          }, // 坐标轴标签
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            type: "line",
            symbol: "circle",
            lineStyle: {
              width: 1,
              type: "dashed",
            },
          },
          {
            type: "line",
            symbol: "circle",
            lineStyle: {
              width: 1,
              type: "dashed",
            },
          },
        ],
      },
      columnOption2: {
        tooltip: {
          show: true,
        },
        legend: {
          show: true,
          orient: "horizontal",
          itemWidth: 22,
          itemHeight: 10,
          lineStyle: {
            type: "solid",
          },
        },
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，
          // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
          // 如果不指定 dimensions，也可以通过指定 series.encode
          source: [],
        },
        grid: {
          right: 10,
          bottom: 50,
          top: 40,
        },
        xAxis: {
          show: true,
          type: "category",
          axisLine: {
            show: true,
          }, // 坐标轴线
          axisTick: {
            show: false,
          }, // 坐标轴刻度
          axisLabel: {
            rotate: -15,
            align: "center",
            margin: 20,
            show: true,
            interval: 0,
            width: 68,
            overflow: "breakAll",
            ellipsis: "...",
          }, // 坐标轴标签
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
          axisTick: {
            show: false,
          }, // 坐标轴刻度
          axisLabel: {
            show: true,
          }, // 坐标轴标签
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            type: "line",
            symbol: "circle",
            lineStyle: {
              width: 1,
              type: "dashed",
            },
          },
          {
            type: "line",
            symbol: "circle",
            lineStyle: {
              width: 1,
              type: "dashed",
            },
          },
        ],
      },
      columnOption3: {
        tooltip: { show: true },
        dataset: {
          source: [],
        },
        grid: {
          left: 50,
          right: 20,
          bottom: 50,
          top: 20,
        },
        xAxis: {
          show: true,
          type: "category",
          axisLine: {
            show: true,
          }, // 坐标轴线
          axisLabel: {
            interval: 0,
            width: 60,
            overflow: "breakAll",
            ellipsis: "...",
          },
        },

        yAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
          axisTick: {
            show: false,
          }, // 坐标轴刻度
          axisLabel: {
            show: true,
          }, // 坐标轴标签
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: 25,
          },
        ],
      },
      columnOption4: {
        tooltip: { show: true },
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，
          // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
          // 如果不指定 dimensions，也可以通过指定 series.encode
          source: [],
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 50,
          top: 20,
        },
        color: [
          "#458ef7",
          "#939e26",
          "#7936d8",
          "#2b4cd8",
          "#d33dc8",
          "#42bee5",
          "#72c141",
          "#e69137",
          "#e13c3a",
          "#e2bb22",
        ],
        series: [
          {
            type: "pie",
            radius: ["0%", "75%"],
            center: ["35%", "50%"],
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
          },
        ],
        legend: {
          show: true,
          orient: "vertical",
          align: "left",
          right: "10%",

          top: "middle",
          formatter: function (name) {
            return name && name.length > 8 ? name.substr(0, 8) + "..." : name;
          },
        },
      },
    };
  },
  methods: {
    getAlarmLogDataTrend() {
      this.loading = true;
      alarmLogDataTrend({
        searchWhere:
          '(hostIp ="' +
          this.params.targetIp +
          '") OR (requestRecord.targetIp ="' +
          this.params.targetIp +
          '")',
      })
        .then((res) => {
          if (res && res.code === 200) {
            let alarmTrendData = [];
            let alarmTrendValue = Object.values(res.data);
            Object.keys(res.data).forEach((item, index) => {
              alarmTrendData.push({
                日期: item,
                日志数量: alarmTrendValue[index],
              });
            });
            this.columnOption1.dataset.source = alarmTrendData;
          } else {
            this.columnOption1.dataset.source = [];
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getAlarmNumDataByTargetIpTrend() {
      this.loading2 = true;
      alarmNumDataByTargetIpTrend({ targetIp: this.params.targetIp })
        .then((res) => {
          if (res && res.code === 200) {
            this.columnOption2.dataset.source = res.rows.reduce((r, c) => {
              r.push({
                日期: c.name,
                告警数量: c.count,
              });
              return r;
            }, []);
          } else {
            this.columnOption2.dataset.source = [];
          }
        })
        .finally(() => {
          this.loading2 = false;
        });
    },
    getAlarmInfoCountGroupByType() {
      this.loading3 = true;
      alarmInfoCountGroupByType({ targetIp: this.params.targetIp })
        .then((res) => {
          if (res && res.code === 200) {
            this.columnOption3.dataset.source = res.data;
            // .reduce((r, c) => {
            //   r.push({
            //     日期: c.name,
            //     告警数量: c.count,
            //   });
            //   return r;
            // }, []);
          } else {
            this.columnOption3.dataset.source = [];
          }
        })
        .finally(() => {
          this.loading3 = false;
        });
    },
    getAlarmInfoCountGroupByRuleName() {
      this.loading4 = true;
      alarmInfoCountGroupByRuleName({ targetIp: this.params.targetIp })
        .then((res) => {
          if (res && res.code === 200) {
            this.columnOption4.dataset.source = res.data;
            // .reduce((r,c)=>{
            //   r.push({
            //     日期 :c.name,
            //     告警数量:c.count
            //   })
            //   return r
            // },[]);
          } else {
            this.columnOption4.dataset.source = [];
          }
        })
        .finally(() => {
          this.loading4 = false;
        });
    },
    getAlarmInfoList() {
      this.loading5 = true;
      const date = { ...this.query, targetIp: this.params.targetIp };
      alarmInfoList(date)
        .then((res) => {
          if (res && res.code === 200) {
            this.option = res.rows;
            this.total = res.total;
          } else {
            this.total = 0;
            this.option = [];
          }
        })
        .finally(() => (this.loading5 = false));
    },
  },
  mounted() {
    this.getAlarmLogDataTrend();
    this.getAlarmNumDataByTargetIpTrend();
    this.getAlarmInfoCountGroupByType();
    this.getAlarmInfoCountGroupByRuleName();
    this.getAlarmInfoList();
  },
};
</script>
<style scoped lang="scss">
.target-ip-info {
  width: 100%;
  height: 100%;
  background: #eeeeee;
}

.col-2 {
  padding: 0 0 0 6px !important;
}

.common-block-wrap {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  position: relative;
  border-radius: 5px;
}

.row-division-18 {
  height: 12px;
  width: 100%;
}

.chart-tooltip {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0.5;

  .icon-wushuju {
    font-size: 36px;
  }

  .tip-content {
    font-size: 12px;
  }
}
</style>
